<template>
	<div class="pie-echarts" :id="pieid"></div>
</template>

<script>
	export default {
		name: 'pie-echarts',
		data(){
			return  {
				myChart:null,
				legend: ['I级风险', 'II级风险', 'III级风险', 'IV级风险']
			}
		},
		props: ['pieid','piename', 'piecolor', 'piedata','legendflag'],
		mounted() {
			window.addEventListener('resize', ()=> {
				if( this.myChart){
					 this.myChart.resize();
				}
			})
			if(this.piedata.length > 0) {
				this.initCharts()
			}

		},
		watch: {
			piedata(val) { //监听数据发生改变 刷新图表数据
				if (this.myChart) {
					this.myChart.dispose()
				}
				this.initCharts()
			},
		},
		methods: {
			initCharts() {
				this.myChart = this.$echarts.init(this.$el);
				let option = {
					 legend: {
						show: this.legendflag,
						orient: 'vertical',
						right:15,
						top:10,
						data: this.legendData,
						itemWidth:12,
						itemHeight:12,
						textStyle: {
							color: '#fff',
						},
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b}: {c} ({d}%)"
					},
					series: [{
							name: this.piename,
							type: 'pie',
							selectedMode: 'single',
							radius: [0, '80%'],
							label: { //饼图图形上的文本标签
								normal: {
									show: true,
									position: 'inner', //标签的位置
									textStyle: {
										fontSize: 10 //文字的字体大小
									},
									formatter: function(obj) {
										return obj.percent.toFixed(0) + '%'
									}
								}
							},
							labelLine: {
								normal: {
									show: false
								}
							},
							color: this.piecolor,
							data: this.piedata
						}
					]
				};
				this.myChart.setOption(option);
			}
		}
	}
</script>

<style scoped lang="scss">
	.pie-echarts {
		width: 100%;
		height: 100%;
	}
</style>